import React from 'react'
import { Button, Table, Popconfirm } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useRecoilValue } from 'recoil'
import styles from './index.module.less'
import { IPressure } from '@/@types/common'
import { dictValues } from '@/store/dicts'

export interface IProps {
  eventList: IPressure[]
  eventLookHandle: (value: IPressure) => void
  loading: boolean
  deleteHandle: (value: IPressure) => void
  readonly: boolean
}

export default (props: IProps) => {
  const { eventList, eventLookHandle, deleteHandle, loading, readonly } = props
  const dictValue = useRecoilValue(dictValues)

  // 获取性别
  const getSex = (value: number) => {
    const sex = dictValue.sex.find((item) => Number(item.value) === value)
    return sex?.label
  }
  // 获取年龄
  const getAge = (value: number) => {
    const age = dictValue.age.find((item) => Number(item.value) === value)
    return age?.label
  }

  const findLabelByValue: any = (data: any, targetValue: any) => {
    let finalLabel
    for (let i = 0; i < data.length; i++) {
      const node = data[i]

      if (node.value === targetValue) {
        finalLabel = node.label
      }

      if (node.children) {
        const label = findLabelByValue(node.children, targetValue)
        if (label) {
          finalLabel = label
        }
      }
    }
    return finalLabel
  }

  const columns: ColumnsType<IPressure> = [
    // {
    //   title: '序号',
    //   align: 'center',
    //   render: (value, record, index) => <span>{index + 1}</span>,
    // },
    {
      title: '发生病区',
      dataIndex: 'happenAreaName',
      key: 'happenAreaName',
      align: 'center',
      // render: (value, record) => findLabelByValue(wardList, value),
    },
    {
      title: '住院患者病案号',
      dataIndex: 'patientNumber',
      key: 'patientNumber',
      align: 'center',
    },
    {
      title: '入院时间',
      dataIndex: 'admissionTime',
      key: 'admissionTime',
      align: 'center',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      align: 'center',
      render: (value, record, index) => <span>{getSex(value)}</span>,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      align: 'center',
      render: (value, record, index) => <span>{getAge(value)}</span>,
    },
    // {
    //   title: '状态',
    //   dataIndex: 'status',
    //   key: 'status',
    //   align: 'center',
    // },
    {
      title: '操作',
      align: 'center',
      width: 160,
      render: (value, record) => (
        <>
          <Button type='link' onClick={() => eventLookHandle(record)}>
            {readonly ? '查看' : '编辑'}
          </Button>
          {!readonly && (
            <Popconfirm onConfirm={() => deleteHandle(record)} title='确定删除吗？' okText='确定' cancelText='取消'>
              <Button danger type='link'>
                删除
              </Button>
            </Popconfirm>
          )}
        </>
      ),
    },
  ]
  return (
    <Table
      loading={loading}
      rowKey='patientNumber'
      pagination={false}
      dataSource={eventList}
      className={styles.tableWrapper}
      columns={columns}
    />
  )
}
